<template>
  <div id="lxzk_bar" :style="{ width: '100%', height: '250px' }"></div>
</template>
<script>
import echarts from 'echarts'
let echartData = []
export default {
  name: 'lxzk_bar',
  props: ['barData'],
  data() {
    return {}
  },
  mounted() {
    var myChart = echarts.init(document.getElementById('lxzk_bar'))
    echartData = this.barData
    const option = {
      backgroundColor: '#fff',
      title: {
        text: '未录像时长占比',
        left: '10',
        top: '0',
        textStyle: {
          fontSize: 16,
          color: '#2F3033',
        },
      },
      tooltip: {
        trigger: 'axis',
        padding: [8, 10],
        backgroundColor: 'rgba(0,0,0,0.5)',
        axisPointer: {
          type: 'shadow',
          textStyle: {
            color: '#fff',
          },
        },
        // formatter: ' <br/>{b}吧 : {c}成 ',
      },
      grid: {
        left: '15',
        right: '0',
        bottom: '8%',
        top: '50',
        containLabel: true,
      },
      label: {
        show: true,
        position: 'top',
        color: '#333',
        fontSize: 14,
        fontWeight: 700,
      },
      xAxis: [
        {
          type: 'category',
          offset: 2,
          data: ['1%-20%', '21%-40%', '41%-60%', '61%-80%', '81%-100%'],
          axisLine: {
            show: false,
          },
          axisTick: {
            show: false,
          },
          axisLabel: {
            show: true,
            textStyle: {
              color: '#333',
              fontSize: 12,
              fontWeight: 400,
            },
          },
        },
      ],
      yAxis: [
        {
          type: 'value',
          axisLabel: {
            color: '#999999',
            interval: 'auto',
            formatter: '{value}台',
            fontSize: 12,
          },
          axisTick: {
            show: false,
          },
          axisLine: {
            show: false,
          },
          splitLine: {
            show: true,
            lineStyle: {
              color: '#F3F4F4',
            },
          },
        },
      ],
      series: [
        {
          name: '设备数量',
          type: 'bar',
          data: echartData,
          barWidth: 20, // 柱子宽度
          itemStyle: {
            normal: {
              // 每根柱子颜色设置
              color: function (params) {
                const colorList = ['#FAC575', '#F2AA7F', '#F0935B', '#F0705B', '#DA2320']
                return colorList[params.dataIndex]
              },
            },
          },
        },
      ],
    }
    myChart.setOption(option)
    window.addEventListener('resize', function () {
      //   让我们图表调用resize方法
      myChart.resize()
    })
  },
}
</script>
<style lang="scss"></style>
